import styles from "@styles/active/active.module.less";

import moment from "moment";
import { withRouter } from "react-router-dom";
import { Form, Input, DatePicker, Button } from "antd";
import React, { useState, useEffect } from "react";
import { menuNav, dateFormat, filMenuForm, resetdates } from "@actions/data";

import Activity from "@pages/active/activelist";
const { RangePicker } = DatePicker;

function ActiveIndex({ history }) {
  const [form] = Form.useForm();
  const [active, setActive] = useState(0);
  const [menu, setMenuNav] = useState([]);
  const [formdate, setFormDate] = useState({});

  useEffect(() => {
    setMenuNav(menuNav.menus);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // key 当前don索引 tabs切换
  const activeMenu = (key) => setActive(key);

  // 重置表单
  const onReset = () => {
    form.resetFields();
    setFormDate(resetdates(form.getFieldsValue()));
  };

  // values 提交form表单对象
  const onFinish = (values) => setFormDate(filMenuForm(values));

  //errorInfo 提交form错误表单返回值
  const onFinishFailed = (errorInfo) => console.error("Failed:", errorInfo);

  // 只能选择今天和今天之前的时间
  const disabledDate = (current) => current && current > moment().endOf("day");

  // 创建活动
  const createActive = () => {
    history.push({ pathname: "/createActivity/add", state: {} });
  };

  return (
    <section className={styles.activepage}>
      <h1>创建活动</h1>
      <ul style={{ display: "flex" }} className={styles.menus}>
        {menu.map((item) =>
          item.id !== 6 ? (
            <li
              key={item.id}
              className={item.id === active ? styles.active : ""}
              onClick={() => activeMenu(item.id)}
            >
              <span>{item.name}</span>
            </li>
          ) : (
            ""
          )
        )}
      </ul>
      <aside>
        <Form
          form={form}
          layout="inline"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item name="activityName" label="活动名称：">
            <Input />
          </Form.Item>
          <Form.Item name="rangepicker" label="创建时间：">
            <RangePicker
              disabledDate={disabledDate}
              format={dateFormat}
              placeholder={["开始时间", "结束时间"]}
            />
          </Form.Item>
          <Form.Item labelAlign="right">
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
            <Button type="primary" htmlType="reset" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
        <br />
        <div>
          <Button
            type="primary"
            htmlType="button"
            onClick={() => createActive()}
          >
            +创建活动
          </Button>
        </div>
        <br />
        <div>
          <Activity types={active} formdate={formdate} />
        </div>
      </aside>
    </section>
  );
}

export default withRouter(ActiveIndex);
